<div class="row" *ngIf="vendors && vendors.length">
    <div class="col-sm-12">
        <pfng-card [headerTemplate]="carouselHeader">
            <ng-template #carouselHeader>
                <div class="carousel-header">
                    <span class="header-icon">
                        <i class="fa fa-star fa-2x"></i>
                    </span>
                    <span class="header-text">Featured Partners</span>
                    <a appLogEvent [routerLink]="['/','search']">View All Partners</a>
                </div>
            </ng-template>
            <div class="partner-carousel">
                <div class="carousel-left-control">
                    <a [appLogEvent]='{type: "button", name: "Vendors: left"}' [href]="" (click)="handleLeftClick()">
                        <i class="fa fa-caret-left fa-2x"></i>
                    </a>
                </div>
                <div class="carousel-slider">
                    <div class="carousel-slider-inner" id="slider-inner">
                        <div
                            [appLogEvent]='{type: "link", name: "Partner: " + vendor.name, href: "/search"}'
                            *ngFor="let vendor of vendors"
                            (click)="handleVendorClick(vendor)"
                            class="vendor">
                            <table class="img-wrapper">
                                <tr>
                                    <td>
                                        <img [src]="vendor.avatar_url" class="{{ vendor['displayClass'] }}">
                                        <p *ngIf="vendor['displayName']">{{ vendor['displayName'] }}</p>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="carousel-right-control">
                    <a [appLogEvent]='{type: "button", name: "Vendors: right"}' [href]="" (click)="handleRightClick()">
                        <i class="fa fa-caret-right fa-2x"></i>
                    </a>
                </div>
            </div>
        </pfng-card>
    </div>
</div>
